<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <title>供应商系统</title>
    <link rel="stylesheet" type="text/css" href="/Public/css/bootstrap.css"/>
    <link rel="stylesheet" href="/Public/css/style.css" />
    <link rel="stylesheet" type="text/css" href="/Public/css/font-awesome.min.css"/>
    <style>
        body{
            background-color: #F4F4F4;
        }
        .nav{
            height: 40px;
            width: 100%;
            padding: 10px 10px 0px;
        }
        .navbox{
            width:100%;
            height:100%;
            border: 1px solid #00CC99;
            font-size: 14px;
            text-align: center;
            border-radius: 3px;
        }
        .nav a.active {
            background-color: #00CC99;
            color: #FFF;
        }
        .nav a{
            display: inline-block;
            float: left;
            width: 50%;
            height: 100%;
            line-height: 28px;
        }
        .list{
            width: 100%;
            background-color: #FFF;
            padding: 0 10px;
        }
        .list-li{
            width: 100%;
            color: #444;
            border-bottom: 1px solid #E4E3E6;
            overflow: hidden;
            font-size: 15px;
        }
        .list-li p{
            height: 45px;
            line-height: 45px;
        }
        .list-li i{
            margin-right: 8px;
        }
        .items{
            background-color: #FFF;
            display: none;
        }
        .items li{
            position: relative;
            border-bottom: 1px solid #DDD;
            padding-top: 20px;
            padding-bottom: 10px;
            font-size: 13px;
        }
        .items li:last-child{
            border-bottom: none;
        }
        .items p{
            line-height: normal;
            height: initial;
            line-height: 24px;
        }
        .items p.over{
            white-space: nowrap;
            overflow: hidden;
            height: 24px;
            text-overflow: ellipsis;
        }
        .time{
            position: absolute;
            right: 0;
            top: 5px;
            color: #999;
            font-size: 12px;
        }
        .number{
            margin-left: 15px;
            font-size: 13px;
        }
        .icon{
            width: 15px;
            height: 15px;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="app">
    <header class="header">
        <a href="javascript:;" onclick="history.go(-1)" class="back"><i class="fa fa-angle-left"></i></a>
        <h1>调价申请</h1>
    </header>
    <nav class="nav">
        <div class="navbox">
            <a href="/index/change_price">调价申请</a>
            <a href="/index/history" class="active">历史记录</a>
        </div>
    </nav>
    <section>
        <h2 class="hidden">历史列表</h2>
        <ul class="list">
            <li v-for="(list,index) in lists" class="list-li" @click="toggle($event,index)">
                <p><i class="fa fa-caret-right icon"></i>{{list.date}}<span class="number">( {{list.num}} 条 )</span></p>
                <ul class="items">
                    <li v-for="(item,textindex) in list.items" @click.stop.prevent="toggletext($event,index,textindex)"><p class="over">{{item.text}}</p><span class="time">{{item.time}}</span></li>
                </ul>
            </li>
        </ul>
    </section>

</div>
<script src="/Public/js/jquery-2.1.0.js"></script>
<script src="/Public/js/vue.js"></script>
<script src="/Public/js/vue-resource.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            lists:[]
        },
        methods:{
            toggle:function(event,index){
                var items = $(event.currentTarget).find('.items');
                var myindex = index;
                if(items.is(':hidden')){
                    $.each($('.list li.list-li'), function(index) {
                        if(index == myindex){
                            $(this).find('.icon')[0].className = 'fa fa-caret-down icon';
                            items.slideDown(200);
                        }else{
                            $('.list li.list-li').eq(index).find('.icon')[0].className = 'fa fa-caret-right icon';
                            $('.list li.list-li').eq(index).find('.items').slideUp(200);
                        }
                    });
                }else{
                    items.slideUp(200);
                    items.parents('.list-li').find('.icon')[0].className = 'fa fa-caret-right icon';

                };
            },
            toggletext:function(event,index,textindex){
                if($(event.currentTarget).find('p').hasClass('over')){
                    $(event.currentTarget).find('p').removeClass('over');
                }else{
                    $(event.currentTarget).find('p').addClass('over');
                }
            }
        },
        created:function(){
            this.$http.get('/notices/get_history_notice',{emulateJSON: true}).then(function(res){		//初始化赋值
                this.lists = res.data.data;
            },function(){

            });

        }
    });
</script>
</body>
</html>
